<template>
  <el-tabs :tab-position="tabPosition" class="demo-tabs"
           v-model="activeName">
    <el-tab-pane label="航班运行类数据" name="Flight">
      <Flight v-if="activeName=='Flight'"/>
    </el-tab-pane>
    <el-tab-pane label="旅客服务可视化" name="Passenger">
      <Passenger v-if="activeName=='Passenger'"/>
    </el-tab-pane>
    <el-tab-pane label="航站楼平面图数据" name="Terminal">
      <Terminal v-if="activeName=='Terminal'"/>
    </el-tab-pane>
    <el-tab-pane label="工单类数据" name="WorkOrder">
      <WorkOrder v-if="activeName=='WorkOrder'"/>
    </el-tab-pane>
    <el-tab-pane label="设施设备类数据" name="Device">
      <Device v-if="activeName=='Device'"/>
    </el-tab-pane>
    <el-tab-pane label="报修类数据" name="Repair">
      <Repair v-if="activeName=='Repair'"/>
    </el-tab-pane>
    <el-tab-pane label="施工计划类数据" name="Construction">
      <Construction v-if="activeName=='Construction'"/>
    </el-tab-pane>
    <el-tab-pane label="航站楼环境视图" name="Environment">
      <Environment v-if="activeName=='Environment'"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import Flight from './flight/index'
import Passenger from './passenger/index'
import Terminal from './terminal/index'
import WorkOrder from './workOrder/index'
import Device from './device/index'
import Repair from './repair/index'
import Construction from './construction/index'
import Environment from './environment/index'

import {ref} from 'vue'

const activeName = ref('Flight')
const tabPosition = ref('left')
</script>
<style scoped>
.demo-tabs{
  margin: 6px 0 0 12px;
  background-color: #fff;
  border-top-left-radius: 6px;
}
.demo-tabs > .el-tabs__content {
  /* margin-left: 200px; */
  /* padding: 32px; */
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 94%;
}
</style>
